<style>
/* 自定义下拉组件样式 */
.custom-select-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-select-display {
    height: 30px;
    line-height: 28px;
    padding: 0 30px 0 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: all 0.3s ease;
    position: relative;
}

.custom-select-display:hover {
    border-color: #007bff;
}

.custom-select-display::after {
    content: '▼';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #666;
    transition: transform 0.3s ease;
}

.custom-select-display.expanded::after {
    transform: translateY(-50%) rotate(180deg);
}

.custom-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.custom-select-options.expanded {
    max-height: 500px;
    overflow-y: auto;
}

.custom-select-option {
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.custom-select-option:hover {
    background-color: #f8f9fa;
}

.custom-select-option.selected {
    background-color: #007bff;
    color: white;
}

.custom-select-option:last-child {
    border-bottom: none;
}

/* 全选/全不选按钮样式 */
.custom-select-controls {
    padding: 5px 10px;
    border-bottom: 2px solid #e9ecef;
    background-color: #f8f9fa;
    display: flex;
    gap: 10px;
}

.custom-select-control-btn {
    padding: 3px 8px;
    font-size: 12px;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    background: white;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.custom-select-control-btn:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.custom-select-control-btn:active {
    background-color: #dee2e6;
    transform: translateY(1px);
}

/* 移除悬停展开效果，保持正常高度，根据内容自适应高度 */
.hover-expand-select {
    height: auto !important;
    min-height: 200px;
    max-height: none;
    overflow-y: auto;
}
</style>



<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    
    <div class="panel-body">
        <div id="myTabContent" class="tab-content" >
            <input TYPE="hidden" id="row" NAME="data" VALUE='{$row|json_encode|htmlentities}'/>
            <div class="tab-pane fade active in" id="tabs_0">
                <div class="form-group">
                        <label for="c-title" class="control-label col-xs-12 col-sm-2">标题:</label>
                        <div class="col-xs-12 col-sm-8" id="div-title" >
                            <input type="text" id="c-title" name="row[title]" value="{$row.title}" class="form-control" title="title"  placeholder="" data-rule=""  data-tip="标题"  />
                        </div>
                   </div>


                <div class="form-group">
                    <label for="c-column_id" class="control-label col-xs-12 col-sm-2">栏目:</label>
                    <div class="col-xs-12 col-sm-8" id="div-column_id">
                        <select name="row[column_id]" id="c-column_id" class="form-control select" value="{$row.column_id}">
                            <option value="0">请选择栏目</option>
                        </select>
                    </div>
                </div>

                <!-- 添加类型下拉框 -->
                <div class="form-group">
                    <label for="c-type" class="control-label col-xs-12 col-sm-2">类型:</label>
                    <div class="col-xs-12 col-sm-8" id="div-type">
                        <select name="row[type]" id="c-type" class="form-control select">
                            <option value="1" {if ($row.type ?? 1) == 1}selected{/if}>页面</option>
                            <option value="2" {if ($row.type ?? 1) == 2}selected{/if}>文章</option>
                        </select>
                    </div>
                </div>
                <!-- 类型下拉框结束 -->

                <div class="form-group">
                    <label for="c-column_id" class="control-label col-xs-12 col-sm-2">外链:</label>
                    <div class="col-xs-12 col-sm-8" id="div-link">
                        <input type="text" id="c-link" name="row[link]"  value="{$row.link|default=''}" class="form-control" title="link"  placeholder="请输入外链(以http开头)" data-rule=""  data-tip="外链"  />
                    </div>
                </div>


                   <div class="form-group" id="teacher-name-group" style="display:;">
                    <label for="c-name" class="control-label col-xs-12 col-sm-2">老师名称:</label>
                    <div class="col-xs-12 col-sm-8" id="div-name">
                        <input type="text" id="c-name" name="row[name]" value="{$row.name|default=''}" class="form-control" data-rule="" title="title" placeholder="请输入老师名称" data-tip="老师名称" />
                    </div>
                </div>

                   <!-- 教学点下拉框 -->
                {if !$is_community_admin}
                <div class="form-group">
                    <label for="c-ocation_class" class="control-label col-xs-12 col-sm-2">地点:</label>
                    <div class="col-xs-12 col-sm-8" id="div-ocation_class">
                        <div style="margin-bottom: 5px;">
                            <button type="button" class="btn btn-xs btn-primary" id="select-all-ocation">全选</button>
                            <button type="button" class="btn btn-xs btn-default" id="unselect-all-ocation">全不选</button>
                        </div>
                        <select name="row[ocation_id][]" id="c-ocation_class" style="background-color: white !important; opacity: 1 !important;"
                                class="form-control selects hover-expand-select" multiple>
                        </select>
                    </div>
                </div>

                   <!-- 班级下拉框 -->
                   <div class="form-group">
                        <label for="c-classes_id" class="control-label col-xs-12 col-sm-2">班级:</label>
                        <div class="col-xs-12 col-sm-8" id="div-classes_id">
                            <div style="margin-bottom: 5px;">
                                <button type="button" class="btn btn-xs btn-primary" id="select-all-classes">全选</button>
                                <button type="button" class="btn btn-xs btn-default" id="unselect-all-classes">全不选</button>
                            </div>
                            <select id="c-classes_id" class="form-control selects hover-expand-select"  multiple name="row[classes_id][]" style="background-color: white !important; opacity: 1 !important;"
                                    ></select>
                        </div>
                   </div>
                {/if}

                    <!-- 抓取网址功能 -->
                    <div class="form-group">
                        <label for="c-s_url" class="control-label col-xs-12 col-sm-2">抓取网址:</label>
                        <div class="col-xs-12 col-sm-8" id="div-s_url">
                            <div class="form-inline">
                                <input type="text" id="c-s_url" name="s_url" value="" class="form-control" style="width: 70%;" placeholder="请输入要抓取的网址" />
                                <button type="button" id="btn-collect" class="btn btn-primary" style="margin-left: 10px;">
                                    <i class="fa fa-download"></i> 抓取
                                </button>
                            </div>
                        </div>
                    </div>

                <div class="form-group">
                    <label for="c-cover" class="control-label col-xs-12 col-sm-2">封面图:</label>
                    <div class="col-xs-12 col-sm-8" id="div-cover">
                        <div class="form-inline">
                            <input id="c-cover" class="form-control" size="38" name="row[cover]" type="text" value="{$row.cover}" data-tip="">
                            <span>
                                    <button type="button" id="plupload-cover" class="btn btn-danger plupload" data-input-id="c-cover" data-mimetype="image/*" data-multiple="false" data-preview-id="p-cover">
                                        <i class="fa fa-upload"></i> {:__('Upload')}
                                    </button>
                                </span>
                            <span>
                                    <button type="button" id="fachoose-cover" class="btn btn-primary fachoose" data-input-id="c-cover" data-mimetype="image/*" data-multiple="false">
                                        <i class="fa fa-list"></i> {:__('Choose')}
                                    </button>
                                </span>
                            <ul class="row list-inline plupload-preview" id="p-cover"></ul>
                        </div>
                    </div>
                </div>


                   <div class="form-group">
                        <label for="c-content" class="control-label col-xs-12 col-sm-2">内容:</label>
                        <div class="col-xs-12 col-sm-8" id="div-content" >
                            <div style="margin-bottom: 10px;">
                                <button type="button" id="ai-generate-content" class="btn btn-info btn-sm ai-generate-content" data-input-id="editor-content">
                                    <i class="fa fa-magic"></i> AI智能生成内容
                                </button>
                                <span class="text-muted" style="margin-left: 10px;">基于表单信息智能生成文章内容</span>
                            </div>
                            <textarea name="row[content]" id="editor-content" class="form-control editor" data-rule="" rows="5" data-tip="内容" >{$row.content}</textarea>
                        </div>
                   </div>

               <!-- 视频上传控件 -->
               <div class="form-group">
                   <label for="c-video-edit" class="control-label col-xs-12 col-sm-2">视频:</label>
                   <div class="col-xs-12 col-sm-8" id="div-video-edit">
                       <div class="form-inline">
                           <input id="c-video-edit" class="form-control" size="38" name="row[video]" type="text"
                                  value="{$row.video}" data-tip="">
                           <span><button type="button" id="plupload-video-edit" class="btn btn-danger plupload"
                                     data-input-id="c-video-edit" data-mimetype="video/*" data-multiple="false"
                                     data-preview-id="p-video-edit"><i
                               class="fa fa-upload"></i> 上传</button></span>
                           <span><button type="button" id="fachoose-video-edit" class="btn btn-primary fachoose"
                                     data-input-id="c-video-edit" data-mimetype="video/*" data-multiple="false"><i
                               class="fa fa-list"></i> 选择</button></span>
                           <ul class="row list-inline plupload-preview" id="p-video-edit"></ul>
                       </div>
                   </div>
               </div>



                <div class="form-group layer-footer">
                    <label class="control-label col-xs-12 col-sm-2"></label>
                    <div class="col-xs-12 col-sm-8">
                        <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
                        <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</form>



